<template>
	<div  class="customer-service" ref="draggableWindow" >
        <div class="header" @mousedown="startDrag" @click="OpenEmotions(false)">
            {{$t('yytwo_customer')}}
        </div>
        <div class="close" @click="closeCU"></div>
        <div class="chat-container" ref="chatContainer" @click="OpenEmotions(false)">
			<div class="time customTip_noMore" v-if="isChatNull">{{ $t('is_top') }}</div>
            <div v-for="(message, index) in messages" :key="index" :class="['message', message.isUser ? 'user-message' : 'message_other']">
                <div class="time" v-if="!message.customTip">{{formatTime(message.time)}}</div>
                <div class="time customTip" v-if="message.customTip">{{ $t('kf_content_tip') }}</div>
                <p v-if="message.msg_type === 'text'">
					<span v-html="message.text"></span>
					<p v-if="!message.isUser && isAi && message.text.length > 25" class="text_box"><span class="text textContent">{{ message.text }}</span></p>
				</p>
				<p v-if="message.msg_type === 'unServe'">
					<span v-html="message.text"></span>
				</p>
                <div v-if="message.msg_type === 'common_questions'" class="frequently">
                    <h4>【常見問題】</h4>
                    <p v-for="(question, qIndex) in message.questions" :key="qIndex" @click="sendMessage(question.text)">
                        {{ question.text }}
                    </p>
                </div>
                <el-image :infinite="false" v-if="message.msg_type === 1" :src="message.msg_content" alt="用户上传的图片" class="message-image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" fit="cover"  :preview-src-list="imgList" :initial-index="getImageIndex(message.msg_content)" @click="setCurrentImage(message.msg_content)" />
                <video v-if="message.msg_type === 2" :src="message.msg_content" controls class="message-video"></video>
                <div class="user-avatar">
                    <img v-if="user_info.user_avatar && message.isUser" :style="message.isUser ? 'border-radius: 50%;' : 'border-radius: 0;'" width='40' :src="user_info.user_avatar" alt="" />
                    <img style="border-radius: 0;" width='40' :src="lang == 'zh' ? 'https://www.yyfuns.com/static/logoZ.png' : 'https://www.yyfuns.com/static/logoZ_en.png'" alt="" v-if="!message.isUser"/>
                    <svg v-if="!user_info.user_avatar && message.isUser" t="1719544828412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4801" width="40" height="40" style="cursor: pointer;"><path d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726" fill="#1296db" p-id="4802"></path></svg>
					<div style="font-size: 16px" v-if="avatar_masker && message.isUser" class="avatar_masker">
						{{ masker_title }}
					</div>
				</div>
            </div>
            

			<!-- <div class="message message_other">
                <p style="color: #4e91ff;cursor: pointer;" @click="isEvaluate = true">點擊進行評價</p>
                <div class="user-avatar">
                    <view class="time">{{formatTime()}}</view>
                    <img style="border-radius: 0;" width='40' src="https://www.yyfuns.com/static/logoZ.png" alt="" />
                </div>
            </div> -->

            <div class="masker" v-if="isEvaluate" @click="isEvaluate = false"></div>
            <div class="evaluate" :class="{showEval:isEvaluate}">
                <div class="close" @click="isEvaluate = false"></div>
                <div class="title-info">是否解決問題</div>
                <div class="radio">
                    <p @click="solve = true" :class="{active:solve}">已解決</p>
                    <p @click="solve = false" :class="{active:!solve}">未解決</p>
                </div>
                <h3>請對本次服務進行評估</h3>
                <StarRating class="StarRating" v-model="rating" :max-stars="5" />
                <div class="evaluate-tip">{{evaluateTip}}</div>
                
                <div class="evaluate_mian">
                    <p :class="{'active':evaluate.indexOf(item) > -1}" @click="checkEval(item,index)" v-for="item,index in evaluate_list" :key="index">{{item}}</p>
                </div>
                
                <!-- <textarea class="textarea" placeholder="歡迎給我們服務提建議~（選填）" maxlength="500"></textarea> -->
                <el-input class="textarea" v-model="textarea" maxlength="300" placeholder="歡迎給我們服務提建議~（選填）" show-word-limit type="textarea" :rows="5"/>
                <div class="sub_evaluate">提交評價</div>
            </div>
            
        </div>
        <div class="input-container" >
            <div class="moreFunction">
                <div class="picture">
                    <img :title="$t('uploadTip')" @click="chooseMedia" width='30' src="../../assets/ser_tp.png" alt="" />
                    <input type="file" accept="image/*,video/*" ref="fileInput" @change="handleFileChange" style="display: none;">
                </div>
                <!-- <div class="emoji" :title="$t('emoji')">
                    <div>
                        <V3Emoji  @click-emoji="clickEmoji" :recent="true" size="small" :options-name="optionsName"></V3Emoji>
                    </div>
                </div> -->
				<div class="emoji" @click="OpenEmotions('1')">
					<svg t="1730280950645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20658" width="28" height="28"><path d="M512 64C264.618667 64 64 264.618667 64 512S264.618667 960 512 960 960 759.381333 960 512 759.381333 64 512 64zM297.386667 405.717333a62.293333 62.293333 0 0 1 124.586666 0v0.085334a62.293333 62.293333 0 1 1-124.586666-0.085334zM512 778.794667a190.762667 190.762667 0 0 1-190.805333-190.805334h381.610666A190.762667 190.762667 0 0 1 512 778.794667z m152.32-310.784a62.293333 62.293333 0 1 1 0-124.629334 62.293333 62.293333 0 0 1 0 124.586667z" fill="#FFA943" p-id="20659"></path></svg>
				</div>
				<Emotion ref="EmotionB" @AppendInputValue="AppendMessageText"></Emotion>
				<!-- <div class="custom" :title="$t('Transfer')" @click="connectToService">
					<svg t="1730356591658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6906" width="25" height="25"><path d="M516.827429 807.862857a131.584 131.584 0 0 0 125.513142-88.502857 7.168 7.168 0 0 0-4.096-8.923429 7.68 7.68 0 0 0-9.508571 2.998858c-0.292571 0.219429-20.48 31.817143-98.889143 42.057142a264.045714 264.045714 0 0 1-34.084571 2.340572c-55.003429 0-79.506286-20.114286-79.725715-20.260572a7.753143 7.753143 0 0 0-9.874285-0.146285 7.168 7.168 0 0 0-1.462857 9.508571c24.649143 37.961143 66.852571 60.854857 112.128 60.928z m422.180571-471.259428l-2.048 0.146285C891.026286 143.872 715.190857 0 504.466286 0 287.963429 0 108.032 151.844571 68.242286 352.694857 29.476571 359.497143 0 392.484571 0 432.274286v159.670857A81.92 81.92 0 0 0 82.797714 672.914286c25.819429 0 48.566857-11.776 63.707429-29.915429a378.075429 378.075429 0 0 0 205.531428 209.334857 43.154286 43.154286 0 0 1 4.169143-6.582857c1.462857-1.828571 3.145143-3.364571 4.534857-3.364571 1.462857 0 2.852571 0.512 4.022858 1.316571-21.796571-15.725714-100.717714-96.621714-117.76-209.554286-7.533714-49.737143 30.939429-98.523429 75.702857-106.569142 71.826286-12.946286 143.36-27.721143 215.186285-40.448 45.714286-8.045714 76.946286-32.329143 96.036572-72.704 4.461714-9.508571 10.971429-28.525714 13.897143-56.100572a8.777143 8.777143 0 0 1 8.704-7.314286c2.925714 0 5.485714 1.462857 7.168 3.657143l1.974857-1.243428c28.306286 39.862857 84.48 128 92.598857 221.037714 9.216 106.349714 4.096 179.053714-79.945143 253.586286a6.436571 6.436571 0 0 0 0.877714 10.313143l1.974858 0.877714c0.658286 0.219429 1.170286 0.365714 1.755428 0.365714s1.024-0.146286 1.536-0.365714l3.510857-1.901714a375.149714 375.149714 0 0 0 180.297143-212.114286c12.214857 17.554286 31.232 30.208 53.394286 34.596571-35.474286 156.672-179.785143 254.756571-358.546286 269.677715a73.216 73.216 0 0 0-68.096-44.032c-40.448 0-73.289143 30.939429-73.289143 69.266285 0 38.180571 32.914286 69.193143 73.289143 69.193143 32.621714 0 59.977143-20.260571 69.412572-48.201143 206.921143-16.237714 372.882286-135.314286 407.405714-320.438857A81.92 81.92 0 0 0 1024 579.949714V418.377143c0-45.129143-38.034286-81.773714-84.992-81.773714z m-76.361143 46.445714c-53.979429-141.604571-193.828571-242.688-358.4-242.688-163.84 0-303.177143 100.205714-357.668571 240.932571-2.633143-3.218286-5.851429-5.997714-8.996572-8.777143C168.448 201.142857 320.731429 70.802286 504.466286 70.802286c182.857143 0 334.628571 129.024 366.445714 299.300571a82.285714 82.285714 0 0 0-8.265143 12.946286z" fill="#1296db" p-id="6907"></path></svg>
				</div> -->
            </div>
			<input @click="OpenEmotions(false)" @keydown.enter.prevent="sendMessage" @focus="handleFocus" @blur="handleBlur" v-model="inputMessage" type="text" class="chat-input" :placeholder="$t('question')" />
			<div class="send-btn" @click="sendMessage">{{ $t('Send') }}</div>
        </div>
    </div>
	
	
</template>
<style>
.PollUp-vue-used-vue-type-style-index-0-lang-module__tabName___NqY-i {
	width: 300px;
	margin: 0;
	position: relative;
	left: 20px;
}
</style>
<script setup>
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css";
import { useUserInfoStore } from "@/store/modules/user_info/index";
import * as idb from "../../utils/IndexedDB"; // 引入 IndexedDB 操作文件
import StarRating from "@/components/StarRating/index.vue";
import { useIsShowLogin } from "@/store/modules/isShowLogin/index.js";
import { useI18n } from 'vue-i18n';
import { useLoadingStore } from "@/store/modules/loading/index";
import Emotion from "@/components/yy_Emotion/index.vue";
import axios from '@/utils/api'
import { watchEffect } from "vue";
const { locale } = useI18n();
const loadingStore = useLoadingStore();
// 解构出 t 函数
const { t } = useI18n();
const isShowLoginStore = useIsShowLogin();

let user_infoStore = useUserInfoStore();
let user_info = reactive(user_infoStore.userInfo);

const rating = ref(5);
const evaluateTip = ref("非常滿意");

const solve = ref(true);

const evaluate_list = ref(["没解决问题", "服务态度差", "不礼貌", "回答不及时"]);
const evaluate = ref([]);

const avatar_masker = ref(0);
const masker_title = ref("");
if (user_info) {
	switch (user_info.avatar_check) {
		case 1:
			if (locale.value == "zh") {
				masker_title.value = "審核中";
			} else {
				masker_title.value = "Under review";
			}

			avatar_masker.value = 1;
			break;
		case 2:
			avatar_masker.value = 0;
			break;
		case 3:
			if (locale.value == "zh") {
				masker_title.value = "被駁回";
			} else {
				masker_title.value = "Rejected";
			}

			avatar_masker.value = 1;
			break;
	}
}

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}

const watchStop = ref(null)
const debounceTimer = ref(null); // 用于存储定时器

const checkEval = (item) => {
	const index = evaluate.value.indexOf(item);
	if (index > -1) {
		evaluate.value.splice(index, 1);
	} else {
		evaluate.value.push(item);
	}
	console.log(evaluate.value);
};

watchEffect(() => {
	switch (rating.value) {
		case 1:
			evaluateTip.value = "非常不滿意";
			evaluate_list.value = [
				"没解决问题",
				"服务态度差",
				"不礼貌",
				"回答不及时",
			];
			break;
		case 2:
			evaluateTip.value = "不滿意";
			evaluate_list.value = [
				"没解决问题",
				"服务态度差",
				"不礼貌",
				"回答不及时",
			];
			break;
		case 3:
			evaluateTip.value = "一般";
			evaluate_list.value = ["没解决问题", "回答不及时"];
			break;
		case 4:
			evaluateTip.value = "滿意";
			evaluate_list.value = ["没解决问题"];
			break;
		case 5:
			evaluateTip.value = "非常滿意";
			evaluate_list.value = [];
			break;
	}
	evaluate.value = [];

});

const props = defineProps(["close_fn",'setUnreadMessage','isCustomerservice','unreadMessage']);
const {isCustomerservice,unreadMessage} = toRefs(props)
const closeCU = () => {
	props.close_fn();
	totalSum.value = 0
};
const totalSum = ref(0);

watchEffect(() => {
	props.setUnreadMessage(totalSum.value)
	if(isCustomerservice.value){
		totalSum.value = 0
	}
});

let messages = ref([
	//   { text: '您好，請問有什麼可以幫您？', isUser: false,time:new Date(), type: 'text' },
]);

// console.log(messages.value);

const inputMessage = ref("");
const chatContainer = ref(null);

const scrollToBottom = () => {
	nextTick(() => {
		setTimeout(() => {
			chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
		}, 200); // 延迟执行以确保 DOM 完全更新
	});
};

const sendMessage = async (msg,isUser = true) => {
	
	console.log(msg,'mmmmmmmmmmmm');
	const illegalPatterns = [
		/<img/i,
		/<script/i,
		/<a/i,
		/<div/i,
		/<span/i,
		/<iframe/i,
		/<link/i,
		/<style/i,
		/<meta/i,
		/<body/i,
		/javascript:/i,
		/data:/i,
		/on\w+=".*?"/i, // 匹配所有以 on 开头的事件处理属性
	];

	for (const pattern of illegalPatterns) {
		if (pattern.test(inputMessage.value)) {
			ElMessage.error("請勿發送非法字符");
			return;
		}
	}

	const addMessage = (message) => {
		console.log(message,'messagemessage');

		messages.value.push({ ...message, isUser, time: message.send_time });
		console.log(messages.value,'messages.value');
		if(isUser){
			scrollToBottom()
		}else if (isUserAtBottom()) {
			if(message.msg_type == 1){
				loadMediaAndScroll(message.msg_content, 1);
			}else{
				scrollToBottom()
			}
			
		}
	};

	// 处理消息类型
	console.log('00000000000',msg,isUser);
	if(isUser){
		if (msg.msg_type === "image" || msg.msg_type === "video") {
			// 处理图片和视频消息
			addMessage({...msg,msg_type:msg.msg_type == "image" ? 1 : 2}); 
			if(socket.value){
				socket.value.send(JSON.stringify({
					ControllerName:'SendChat',
					msg_content:msg.msg_content,
					form_user_id: user_info.id,
					msg_type:msg.msg_type == "image" ? 1 : 2,
					to_user_id:0
				}));
			}
			
			
			console.log(111111111111);
			
		} else if (msg && msg.type !== "click" && msg.type !== "keydown") {
			// 处理常见问题发送
			addMessage({ text: msg, msg_type: "text",send_time:new Date() });
			console.log(2222222222222);
		} else if (inputMessage.value.trim() !== "" || msg.msg_type === "text") {
			// 处理输入框文本消息
			addMessage({ text: convertEmoticonsToGIF(inputMessage.value), msg_type: "text",send_time:new Date() });
			if(socket.value){
				socket.value.send(JSON.stringify({
					ControllerName:'SendChat',
					msg_content:inputMessage.value,
					form_user_id: user_info.id,
					to_user_id:0,
					msg_type: 0,
				}))
			}
			inputMessage.value = ""; // 清空输入框
			// console.log(3333333333);
		}
	}else{
		console.log(msg,'msggggggg');
		const flattened = {
			...msg,
			...msg.msg
		};
		delete flattened.msg;
		console.log(msg,'aaaaaaaaaa');
		console.log(flattened,'flattened');
		
		if(flattened.msg_type == 1 || flattened.msg_type == 2){  //接收图片视频消息
			addMessage(flattened)
			if(flattened.msg_type == 1){
				imgList.value.push(flattened.msg_content)
			}
			showMessage(flattened.msg_type,flattened.msg_type)
		}else if(flattened.msg_type == 0){  //接收文字消息
			addMessage({ text: convertEmoticonsToGIF(flattened.msg_content), msg_type: 'text',send_time:flattened.send_time })
			showMessage(flattened.msg_content)
			if(isAi){
				nextTick(()=>{
					const textElement = document.querySelectorAll('.textContent');
					const textContent = textElement[textElement.length - 1].textContent;
					const animationDuration = textContent.length * 10; // 单位：毫秒
					textElement[textElement.length - 1].style.animationDuration = `${animationDuration}ms`;
				})
			}
			
		}

		if(!isCustomerservice.value){
			if(inter){
				clearInterval(inter)
			}
			let newMessage = lang.value == 'zh' ? '您有新的客服消息！' : 'You have new customer service messages!';
			inter = setInterval(() => {
				document.title = (document.title === originalTitle) ? newMessage : originalTitle;
			}, 1000); 
		}
	}
	
	

	// await idb.addMessage({
	// 	...messages.value[messages.value.length - 1],
	// 	userId: user_info.id,
	// });
};
const SelectOpen = (type)=>{ //获取聊天用户列表
	socket.value.send(JSON.stringify({ 
		ControllerName:'Window',
		window_status:type,
		form_user_id:user_info.id,
		to_user_id:0,
	})); 
}
const isContent = ref(false)
const isSelectChat = ref(false)
let inter = null
let originalTitle = document.title;
let notificationInstance = null
watchEffect(()=>{
	if(isCustomerservice.value){
		if(inter){
			clearInterval(inter)
		}
		document.title = t('game_info_title')
		if(!isContent.value){ //第一次打开未连接的时候连接
			// connectToService()
		}
		if(!isSelectChat.value){ //第一次打开未连接的时候连接
			// connectToService()
			SelectMsg() //查询聊天记录
			isSelectChat.value = true
		}
		if(notificationInstance){
			notificationInstance.close()
			notificationInstance = null
			chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
		} 
	}else{
		const videos = Array.from(document.querySelectorAll('video'))
		for(let item of videos){
			if(!item.paused) item.pause()
		}
		if(notificationInstance){
			notificationInstance.close()
			notificationInstance = null
			if(timer){
				clearTimeout(timer)
			}
			
		} 
	}
	
})



 //修改标签标题定时器
let timer = null
const showMessage = (message,type)=>{
	if(notificationInstance){
		notificationInstance.close()
		notificationInstance = null
	} 
	if(lang.value == 'zh'){
		notificationInstance = ElNotification({
			title: '歪歪兔客服：'+(Number(unreadMessage.value)+1)+'條未讀消息',
			message: type ? (type == 1 ? '[圖片]' : '[視頻]') : message.length > 100 ? convertEmoticonsToGIF(message.substring(0, 100)) + '...' : convertEmoticonsToGIF(message),
			duration:0,
			dangerouslyUseHTMLString: true,
			customClass: 'iconLogo',
			onClick: () => {
				if(!isCustomerservice.value){
					closeCU()
				}
				notificationInstance.close()
				notificationInstance = null
				chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
			}
		})
	}else{
		notificationInstance = ElNotification({
			title: 'YYTWO Customer Service：'+(Number(unreadMessage.value)+1)+' unread messages',
			message: type ? (type == 1 ? '[Picture]' : '[Video]') : message.length > 100 ? convertEmoticonsToGIF(message.substring(0, 100)) + '...' : convertEmoticonsToGIF(message),
			duration:0,
			dangerouslyUseHTMLString: true,
			customClass: 'iconLogo_en',
			onClick: () => {
				if(!isCustomerservice.value){
					closeCU()
				}
				notificationInstance.close()
				notificationInstance = null
				chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
			}
		})
	}
	if(isCustomerservice.value && notificationInstance){
		clearTimeout(timer)
		timer = setTimeout(() => {
			notificationInstance.close()
			notificationInstance = null
		}, 5000);
	}
}

const isUserAtBottom = () => {
	const el = chatContainer.value;
	const message = document.querySelectorAll(".message");
	const msgH = message[message.length - 1];
	if(!msgH){
		return false
	}
	//   console.log(el.scrollHeight - el.scrollTop - el.clientHeight,msgH.clientHeight + 76);
	console.log(msgH,msgH.clientHeight,'elelelel');
	return (
		el.scrollHeight - el.scrollTop - el.clientHeight < msgH.clientHeight + 76
	); // 判断用户是否在底部
};

// const timer = setInterval(()=>{
// 	messages.value.push({ text: '發發發哈哈哈哈哈哈哈哈上 ', isUser: false ,time:new Date(), type: 'text'});
// 	nextTick(() => {
// 		if (isUserAtBottom()) {
// 		  chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
// 		}
// 	});

// },1000)

onBeforeUnmount(() => {
	//   clearInterval(timer)
	if(socket.value){
		socket.value.close()
	}
	
});

const updateClientHeight = () => {
	const height = document.documentElement.clientHeight;
	document.documentElement.style.setProperty("--clientHeight", `${height}px`); // 更新 --clientHeight
};

const commonQuestions = [
	//常见问题列表
	{ text: "1.各种账号相关问题怎么处理？" },
	{ text: "2.遊戲储值有问题怎么处理？" },
	{ text: "3.如何使用优惠券？" },
];

let resizeObserver;
const socket = ref(null);
const isChatNull = ref(false) //是否还有聊天记录
onMounted(async () => {
	setVh()
	updateClientHeight();
	resizeObserver = new ResizeObserver(updateClientHeight);
	resizeObserver.observe(document.documentElement); // 观察文档根元素
	chatContainer.value.addEventListener('scroll', () => {
        if (chatContainer.value.scrollTop === 0 && !isChatNull.value) {
          console.log('已经滚动到顶部');
		  loadingStore.startLoading();
		  chatPage.value += 1
		  SelectMsg()
        }
    });

	// messages.value = await idb.getAllMessages(user_info.id);

	// for (let item of messages.value) {
	// 	if (item.msg_type == "image") {
	// 		imgList.value.push(item.src);
	// 	}
	// }

	// messages.value.push({
	// 	text: t('kf_msg'),
	// 	isUser: false,
	// 	time: new Date(),
	// 	msg_type: "text",
	// });
	// messages.value.push({
	// 	msg_type: "common_questions",
	// 	questions: commonQuestions,
	// 	isUser: false,
	// 	time: new Date(),
	// }); // 将常见问题添加到消息列表的末尾

	// console.log(messages.value);
	// setTimeout(() => {
	// 	chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
	// 	chatContainer.value.style.scrollBehavior = "smooth";
	// }, 50);
	

});
// const messageListDone = ref(false)
const connectToService = () => {
	if(!user_info.id){
		ElMessage.warning('請先登錄才能聯繫客服')
		isShowLoginStore.showLogin();
		return
	}
	if (socket.value) {
        socket.value.onopen = null;
        socket.value.onmessage = null;
        socket.value.onclose = null;
        socket.value.onerror = null;
        socket.value.close(); // 显式关闭连接
        socket.value = null; // 置为 null，释放引用
    }
	loadingStore.startLoading();
	socket.value = new WebSocket(`wss://${window.location.hostname.replace(/^www\./, '')}/ws?type=web&user_id=${user_info.id}&username=${user_info.username}&user_avatar=${user_info.user_avatar}&model=chat`);

	
	socket.value.onmessage = (event) => {
		const data = JSON.parse(event.data);
		console.log("收到消息：",event);

		
		if(data.Code === 0 && !isContent.value){
			isContent.value = true;
			// ElMessage.success('客服連接成功');
			SelectList()
		}else if(data.Code == 201){  //data.portServe == "customer"
			if(data.Status == 'Message'){ //接收后台消息
				sendMessage(data.Data,false);
				totalSum.value += 1
			}else if(data.Status == 'MsgList'){ //获取聊天记录
				loadingStore.stopLoading();
				const chatInfo = chatPage.value == 1 ? data.Data.list.reverse() : data.Data.list;
				if(chatInfo.length == 0 && chatPage.value != 1){
					isChatNull.value = true
					return
				}
				const oldScrollTop = chatContainer.value.scrollTop;
				const oldScrollHeight = chatContainer.value.scrollHeight;
				chatContainer.value.style.scrollBehavior = "auto";
				for (let item of chatInfo) {
					let msg_type = item.msg_type == 0 ? 'text' : item.msg_type
					if(chatPage.value == 1){
						messages.value.push({ text: convertEmoticonsToGIF(item.msg_content), isUser: item.form_user_id == user_info.id ,time:item.send_time, msg_type,msg_content: item.msg_content });
						if (item.msg_type == 1) {
							imgList.value.push(item.msg_content);
						}
					}else{
						messages.value.unshift({ text: convertEmoticonsToGIF(item.msg_content), isUser: item.form_user_id == user_info.id ,time:item.send_time, msg_type,msg_content: item.msg_content });
						if (item.msg_type == 1) {
							imgList.value.unshift(item.msg_content);
						}
					}
					
				}
				nextTick(() => {
					setTimeout(() => {
						const newScrollHeight = chatContainer.value.scrollHeight;
						const heightAdded = newScrollHeight - oldScrollHeight; // 新增内容的高度
						chatContainer.value.scrollTop = oldScrollTop + heightAdded; // 调整 scrollTop
						chatContainer.value.style.scrollBehavior = "smooth";
					}, 200);
				})

				if(chatPage.value == 1 && chatInfo.length == 0){
					messages.value.push({ text: t('yytwo_customer_tip'), isUser: false ,time:new Date(), msg_type: 'text',customTip:true});
					messages.value.push({
						text: t('kf_msg'),
						isUser: false,
						time: new Date(),
						msg_type: "text",
					});
					setTimeout(() => {
						chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
						chatContainer.value.style.scrollBehavior = "smooth";
					}, 50);
				}

				if(!workTime()){
					messages.value.push({
						text: t('workTime'),
						isUser: false,
						time: new Date(),
						msg_type: "text",
					});
				}
				// messageListDone.value = true
				// nextTick(() => {
				// 	if (isUserAtBottom()) {
				// 		chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
				// 	}
				// });
			}else if(data.Status == 'ChatList' && data.Data.length > 0){
				totalSum.value = data.Data[0].no_read_count
				// SelectMsg() //查询聊天记录
			}
		}
		else if(data.Code !== 0){
			ElMessage.warning(data.Message);
		}

		
		
		
	};

	socket.value.onopen = () => {
		console.log("WebSocket连接已建立");
		loadingStore.stopLoading();
		timerPing = setInterval(() => {
			socket.value.send(JSON.stringify({ type: 'ping' })); // 发送心跳包
			console.log('已发送心跳包');
		}, 50000); // 每50秒发送一次


		if(watchStop.value){
			watchStop.value()
		}
		watchStop.value = watch(isCustomerservice,()=>{
			SelectOpen(isCustomerservice.value);
		},{ immediate: true }) //主动触发一次
		// watchStop.value = watch(isCustomerservice,()=>{
		// 	if (!debounceTimer.value) {
		// 		SelectOpen(isCustomerservice.value); // 执行目标函数
		// 		debounceTimer.value = setTimeout(() => {
		// 			SelectOpen(isCustomerservice.value);
		// 			clearTimeout(debounceTimer.value);
		// 			debounceTimer.value = null; 
		// 		}, 5000);
		// 	}
		// },{ immediate: true }) //主动触发一次
		
	};

	socket.value.onclose = () => {
		clearInterval(timerPing);
		loadingStore.stopLoading();
		console.log("WebSocket连接已关闭");
		// ElMessage.warning('連接已斷開，重新連接中！');
		if(isClose.value){
			connectToService()
		}
		
		// messages.value.push({ text: t('fb_serve_msg'), isUser: false ,time:new Date(), msg_type: 'unServe'});
		// nextTick(() => {
		// 	if (isUserAtBottom()) {
		// 		chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
		// 	}
		// });
	};
};
let timerPing = null
const isClose = ref(true)
const closeSocket = () => { //游戏界面iframe小窗时关闭客服的socket连接
	isClose.value = false
	if(socket.value){
		socket.value.close()
	}
	if(notificationInstance){
		notificationInstance.close()
		notificationInstance = null
	} 
}

const openSocket = () => {//游戏界面iframe小窗时打开客服的socket连接
	isClose.value = true
	connectToService()
}

defineExpose({
    connectToService,
	closeSocket,
	openSocket
});


const optionsName = {
	"Smileys & Emotion": "笑脸&表情",
	"Food & Drink": "食物&饮料",
	"Animals & Nature": "动物&自然",
	"Travel & Places": "旅行&地点",
	"People & Body": "人物&身体",
	Objects: "物品",
	Symbols: "符号",
	Flags: "旗帜",
	Activities: "活动",
};
const value = ref("");
const clickEmoji = (val) => {
	inputMessage.value += val;
};

const formatTime = (time = new Date()) => {
	if (typeof time === 'number' && time < 10000000000) {
		time *= 1000;
	}
	time = new Date(time);
	const now = new Date();
	const isSameDay = now.toDateString() === time.toDateString(); // 判断是否为同一天
	const isSameYear = now.getFullYear() === time.getFullYear(); // 判断是否为同一年

	if (isSameDay) {
		// 如果是当天，返回时分秒
		return time.toLocaleTimeString("zh-CN", {
			hour: "2-digit",
			minute: "2-digit",
			second: "2-digit",
		});
	} else if (isSameYear) {
		// 如果是同一年，返回 月-日 时:分:秒
		return (
			time.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }) +
			" " +
			time.toLocaleTimeString("zh-CN", {
				hour: "2-digit",
				minute: "2-digit",
				second: "2-digit",
			})
		);
	} else {
		// 如果跨年，返回 年-月-日 时:分:秒
		return (
			time.toLocaleDateString("zh-CN", {
				year: "numeric",
				month: "2-digit",
				day: "2-digit",
			}) +
			" " +
			time.toLocaleTimeString("zh-CN", {
				hour: "2-digit",
				minute: "2-digit",
				second: "2-digit",
			})
		);
	}
};

const imgList = ref([]);
const currentImageSrc = ref(null);
const setCurrentImage = (src) => {
	currentImageSrc.value = src;
};
const getImageIndex = (src) => {
	return imgList.value.indexOf(src);
};

const handleFocus = () => {
	document.querySelector(".chat-input").style.borderColor = "#4caf50";
};
const handleBlur = () => {
	document.querySelector(".chat-input").style.borderColor = "#ddd";
};


const fileInput = ref(null);
const chooseMedia = () => {
	fileInput.value.click();
	OpenEmotions(false)
};

const handleFileChange = async (event) => {
  const file = event.target.files[0];
  console.log(file);

  if (file) {
    const type = file.type.split("/")[0];
    const fileSizeMB = file.size / (1024 * 1024); // 转换为 MB

    // 检查文件类型
    if (type != "video" && type != "image") {
      ElMessage.warning(t('video_tip'));
      return;
    }

    // 检查文件大小
    if ((type == "image" && fileSizeMB > 5) || (type == "video" && fileSizeMB > 20)) {
      ElMessage.warning(t('file_tip'));
      return;
    }

	const formData = new FormData();
    formData.append("file", file); // 将文件添加到 FormData
	const res = await axios.post('/upload/image',formData,{
        headers:{'Content-type' : 'multipart/form-data'}
    })
	console.log(res);
	const fileUrl = window.baseUrl+res.data.media_url
	// 根据文件类型处理
	if (type === "image") {
		imgList.value.push(fileUrl); // 将 URL 添加到图片列表
	}

	// 发送消息
	sendMessage({
		msg_type: type,
		msg_content: fileUrl, // 使用服务器返回的 URL
		send_time: new Date(),
	});
  }

  fileInput.value.value = ""; // 清空 input 以便下次选择
};

const textarea = ref("");
const isEvaluate = ref(false);

const isAi = false //消息展示效果gpt

const isDragging = ref(false)
const offsetX = ref(0)
const offsetY = ref(0)
const draggableWindow = ref()
const startDrag = (event) => {
	if(window.innerWidth < 1024) return
	event.preventDefault();
	isDragging.value = true;
	offsetX.value = event.clientX - draggableWindow.value.offsetLeft;
	offsetY.value = event.clientY - draggableWindow.value.offsetTop;
	draggableWindow.value.style.transition = "none";
	document.addEventListener("mousemove", drag);
	document.addEventListener("mouseup", stopDrag);
}
const drag = (event) => {
	if (isDragging.value) {
		draggableWindow.value.style.top = `${event.clientY - offsetY.value}px`;
		draggableWindow.value.style.left = `${event.clientX - offsetX.value}px`;
	}
}
const stopDrag = () => {
	isDragging.value = false;
	draggableWindow.value.style.transition = "all 0.3s";
	document.removeEventListener("mousemove", drag);
	document.removeEventListener("mouseup", stopDrag);

	//超出边界复位
  	const { top, left, width, height } = draggableWindow.value.getBoundingClientRect();
	const { clientWidth, clientHeight } = document.documentElement;

	if(top <= 0){
		draggableWindow.value.style.top = height / 2 + 'px';
	}

	if(left <= 0){
		draggableWindow.value.style.left = width / 2 + 'px';
	}

	if(top >= clientHeight - 51){
		draggableWindow.value.style.top = clientHeight + height / 2 - 51 + 'px';
	}

	if(left >= clientWidth - width){
		draggableWindow.value.style.left = clientWidth + width / 2 - width + 'px';
	}
}

const chatPage = ref(1)
const SelectMsg = ()=>{ //查询聊天记录
	loadingStore.startLoading();
	socket.value.send(JSON.stringify({ 
		ControllerName:'SelectMsg',
		page:chatPage.value,
		limit:20,
		form_user_id:0,
		to_user_id:user_info.id
	})); 
}
const EmotionB = ref()
const OpenEmotions = (type) => {
	if(type == '1'){
		if(EmotionB.value.Show){
			EmotionB.value.OpenEmotion(false)
		}else{
			EmotionB.value.OpenEmotion(true);
		}
	}else{
		EmotionB.value.OpenEmotion(type);
	}
    
}
const AppendMessageText = (EmotionChinese) => {
    inputMessage.value += EmotionChinese;
}
const emoticons = [
	'微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭',
	'尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱',
	'白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘',
	'晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼',
	'右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒',
	'篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹',
	'刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引',
	'拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手',
	'激动', '街舞', '献吻', '左太极', '右太极'
]
const convertEmoticonsToGIF= (message) => {
	return emoticons.reduce((acc, emoticon, index) => {
		const gifUrl = `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif`;
		return acc.replace(new RegExp(`\\[\\[${emoticon}\\]\\]`, 'g'), `<img src="${gifUrl}" alt="${emoticon}" style="width: 24px; height: 24px;">`);
	}, message);
}

const SelectList = ()=>{ //获取聊天用户列表
	socket.value.send(JSON.stringify({ 
		ControllerName:'SelectList',
		page:1,
		limit:99,
		form_user_id:user_info.id,
	})); 
}

const setVh = () => {
    // 获取当前视口高度
    let vh = window.innerHeight * 0.01;
    // 设置 --vh 变量的值为视口高度的 1%
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 当窗口大小发生变化时，重新计算视口高度
window.addEventListener('resize', setVh);

const workTime = () => {
	const now = new Date();
	const today = now.toDateString();
	// 创建今天的9:30和19:00的时间对象
	const startTime = new Date(today + ' 09:30:00');
	const endTime = new Date(today + ' 19:00:00');
	return now >= startTime && now < endTime;
}

const loadMediaAndScroll = (mediaUrl, mediaType) => {
  if(mediaType == 1) {
    const img = new Image();
    img.src = mediaUrl;
    img.onload = scrollToBottom;
    img.onerror = scrollToBottom;
  } else if(mediaType == 2) {
    const video = document.createElement('video');
    video.src = mediaUrl;
    
    // 视频只需要元数据加载完成即可知道尺寸，不必等待整个视频加载
    video.addEventListener('canplaythrough', scrollToBottom);
    video.addEventListener('error', scrollToBottom);
    
    // 避免内存泄漏
    setTimeout(() => {
      video.removeEventListener('canplaythrough', scrollToBottom);
      video.removeEventListener('error', scrollToBottom);
    }, 5000);
  }
};

// watchEffect(()=>{
// 	if (!isUserAtBottom() && !messageListDone.value) return
// 	const message = messages.value[messages.value.length - 1]
// 	if(!message) return
// 	const msg_type = message.msg_type
// 	if(msg_type == 1){
// 		loadMediaAndScroll(message.msg_content, 1);
// 		alert('图片')
// 	}else if(msg_type == 2){
// 		loadMediaAndScroll(message.msg_content, 2);
// 		alert('视频')
// 	}else{
// 		scrollToBottom()
// 		alert('文字')
// 	}
	
// })

</script>

<style lang="less" scoped>
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@media (max-width: 1024px) {
    .customer-service {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.2s;
		width: 100%;
		z-index: 9999;
		height: 100%;
		overflow: hidden;
		animation: popIn 0.3s ease-out;
		.chat-container{
			height: calc(var(--vh, 1vh) * 100 - 110px);
		}
	}
}

@media (min-width: 1025px) {
	.customer-service {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.2s;
		width: 40%;
		z-index: 9999;
		border-radius: 12px;
		height: 710px;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
		overflow: hidden;
		animation: popIn 0.3s ease-out;
		.chat-container{
			height: 600px;
		}
		.header{
			border-radius: 12px 12px 0 0;
		}
		.input-container{
			border-radius: 0 0 12px 12px;
		}
	}
}



.close {
	z-index: 1000;
	top: 5px;
	transform: scale(0.8);
}

.header {
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: black;
	font-size: 20px;
	border-bottom: 1px solid #eee;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	background-color: white;
	user-select: none;
	cursor: all-scroll;
}

.input-container {
	display: flex;
	border-top: 1px solid #eee;
	padding: 10px 0;
	background-color: white;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 39px;
	z-index: 999;

	.chat-input {
		padding: 8px 10px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 5px;
		width: 50%;
		margin-left: 5px;
		flex: 0.95;
		transition: all 0.2s;
		outline: none;
	}

	.chat-input:active {
		border: 1px solid #4caf50;
	}

	.moreFunction {
		display: flex;
		align-items: center;
		margin-right: 0;
		margin-left: 10px;

		.picture,
		.emoji,
		.custom {
			display: flex;
			cursor: pointer;
		}

		.picture {
			margin-right: 5px;
			border-radius: 5px;
			position: relative;
			top: 2px;
		}
		.emoji{
			margin-right: 7px;
			margin-top: 3px;
		}
		.custom{
			position: relative;
			top: 2px;
		}
	}

	.send-btn {
		padding: 0 15px;
		margin-left: 0px;
		background-color: #4caf50;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		line-height: 40px;
		user-select: none;
	}

	.send-btn:hover {
		background-color: rgba(#4caf50, 0.8);
	}

	.send-btn:active {
		background-color: #377e39;
	}
}

.chat-container {
	background-color: #f7f7f7;
	width: 100%;
	position: relative;
	top: 51px;
	overflow: auto;
	scroll-behavior: auto;
	text-align: center;
	.customTip_noMore{
		font-size: 11px !important;
		display: inline-block;
		padding: 4px 10px;
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.06);
		color: #999;
		font-size: 13px;
		white-space: nowrap;
		margin-top:10px;
	}

	.message_other {
		justify-content: start !important;
		flex-direction: row-reverse;
		.user-avatar {
			margin-left: 20px !important;
			margin-right: 10px !important;
		}

		.text_box{
			position: absolute;
			inset: 0;
			background-color: transparent !important;
			padding: 0 10px !important;
		}
		.text {
			font-size: 14px;
			background: linear-gradient(to right,#ffffff00 var(--p),#ececec calc(var(--p) + 30px)) !important;
			animation: erase 2s linear forwards;
			color: transparent;
			margin: 0;
		}
		p {
			background-color: #ececec !important;
			font-size: 14px;
			position: relative;
			color: #000;
			text-align: justify;
			p {
				color: #4e91ff;
				max-width: none !important;
				padding: 0 5px !important;
				margin-right: 0 !important;
				margin-top: 10px;
			}
		}
		@property --p {
			syntax: "<percentage>";
			initial-value: 0%;
			inherits: false;
		}

		@keyframes erase {
			to {
				--p: 100%;
			}
		}
		.message-image,
		.message-video {
			margin-left: 10px;
		}
		.customTip{
			font-size: 11px !important;
			display: inline-block;
			padding: 4px 10px;
			border-radius: 10px;
			background: rgba(0, 0, 0, 0.06);
			color: #999;
			top: -30px !important;
		}
	}

	.message:last-child {
		margin-bottom: 25px;
	}

	.message {
		display: flex;
		justify-content: end;
		align-items: start;
		margin-top: 45px;
		position: relative;
		margin-bottom: 20px;

		.frequently {
			margin: 0;
			margin-right: 10px;
			background-color: #ececec;
			padding: 10px;
			border-radius: 10px;
			max-width: 67%;
			word-break: break-word;

			p {
				padding: 0;
				margin-top: 10px;
				color: #4e91ff;
				cursor: pointer;
				max-width: none;
				text-align: left;
			}
		}

		.time {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -25px;
			color: #999;
			font-size: 13px;
			white-space: nowrap;
		}

		.user-avatar {
			margin: 0;
			margin-right: 20px;
			position: relative;
			display: flex;
			svg{
				cursor: default !important;
			}
			img {
				border-radius: 50%;
			}
			.avatar_masker {
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0, 0.6);
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50%;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 3;
				font-size: 10px !important;
				cursor: default;
				text-align: center;
			}
		}

		p {
			margin: 0;
			margin-right: 10px;
			background-color: #d1e7dd;
			padding: 10px;
			border-radius: 10px;
			max-width: 67%;
			word-break: break-all;
			text-align: left;
		}

		.message-image,
		.message-video {
			width: 60%;
			margin-right: 10px;
		}
	}

	.showEval {
		bottom: 0 !important;
	}

	.masker {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		z-index: 9999;
	}

	.evaluate {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: -100%;
		z-index: 10000;
		border-radius: 25px 25px 0 0;
		transition: all 0.3s;

		.title-info {
			font-size: 13px;
			text-align: center;
			padding: 15px 0 15px;
		}

		.radio {
			display: flex;
			justify-content: center;

			p {
				border: 1px solid #d9d9d9;
				padding: 6px 14px;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.65);
				transition: all 0.3s;
				cursor: pointer;
			}

			p:hover {
				border: 1px solid #139eff;
			}

			p:first-child {
				border-right: none;
				border-radius: 4px 0 0 4px;
			}

			p:last-child {
				border-left: none;
				border-radius: 0 4px 4px 0;
			}

			.active {
				background: #139eff;
				color: white;
			}
		}

		h3 {
			text-align: center;
			padding: 20px 0 0;
			font-size: 18px;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
		}

		.StarRating {
			justify-content: center;
			padding: 10px 0;
		}

		.evaluate-tip {
			text-align: center;
			padding-top: 5px;
			font-size: 16px;
			height: 50px;
			color: #fc8902;
		}

		.evaluate_mian {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 20px;
			font-size: 13px;

			p {
				width: 49%;
				margin-bottom: 10px;
				height: 33px;
				text-align: center;
				line-height: 33px;
				color: #666;
				border: 1px solid #ececec;
				border-radius: 5px;
				transition: all 0.1s;
				cursor: pointer;
			}

			p:hover {
				border: 1px solid #4e91ff;
			}

			.active {
				background-color: #4e91ff;
				border: 1px solid #4e91ff;
				color: #fff;
			}
		}

		.textarea {
			width: 95%;
			position: relative;
			left: 50%;
			transform: translate(-50%);
		}

		.sub_evaluate {
			margin: 20px;
			padding: 13px 0;
			border-radius: 5px;
			text-align: center;
			background-color: #3d7fff;
			color: #fff;
			font-size: 14px;
			cursor: pointer;
		}

		.sub_evaluate:hover {
			background-color: rgba(#3d7fff, 0.9);
		}

		.sub_evaluate:active {
			background-color: #0a4ed4;
		}
	}
}

</style>


<style lang="less">
.iconLogo,.iconLogo_en{
	cursor: pointer;
	.el-notification__group{
		margin-left: 5px !important;
		max-width: 251px;
		word-break: break-all;
	}
}
.iconLogo:hover,.iconLogo_en:hover{
	filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.3));
}
.iconLogo::before{
	content: '';
	background: url('https://www.yyfuns.com/static/logoZ.png') no-repeat center center;
	background-size: contain;
	width: 25px;
	height: 25px;
}
.iconLogo_en::before{
	content: '';
	background: url('https://www.yyfuns.com/static/logoZ_en.png') no-repeat center center;
	background-size: contain;
	width: 25px;
	height: 25px;
}
</style>